<template>
  <el-dialog
    :visible.sync="dialog.show"
    :show-close="false"
    :close-on-click-modal="false"
    :fullscreen="dialog.fullScreen"
    :class="{ focus: dialog.focus, animating: animating, fullScreen: dialog.fullScreen }"
    :style="{ top: position.y + 'px', left: position.x + 'px', width: width + 'px', height: height + 'px' }"
    append-to-body>
    <header class="window-title" @mousedown.self="onMousedown($event)">
      <div v-if="dialog.icon != ''" :class="dialog.icon" class="icon" />
      {{ dialog.title }}
      <div class="window-control">
        <!--<span class="button min" @mousedown="onMin(dialog.id)"></span>-->
        <span class="button max" @mousedown="onMax()" />
        <span class="button close" @mousedown="onClose(dialog.id)" />
      </div>
    </header>
    <div :style="{ width: width + 'px;height:90%' }" class="window-body">
      <slot />
    </div>
    <template v-if="dialog.showFooter">
      <div class="modal-footer text-center">
        <el-button v-show="dialog.showCancelBtn" @click="close" >取消</el-button>
        <el-button :loading="dialog.loading" type="primary" @click="confirm">{{ dialog.confirmText || '确认' }}</el-button>
      </div>
    </template>
    <template v-else>
      <slot name="footer" />
    </template>
    <div v-show="overlayShow" class="resize-overlay" />
    <div v-for="(value, index) in resizeSide" v-show="resizable" :key="index" :class="value" class="resize-side" @mousedown="onResize(value)" />
  </el-dialog>
</template>

<script>
export default {
  name: 'CustomWindow',
  props: {
    dragDialog: {
      type: Object,
      required: false,
      default: () => {}
    }
  },
  data() {
    return {
      dialog: {},
      defaultDialog: {
        show: false,
        focus: true,
        icon: '',
        title: '',
        fullScreen: true
      },
      timer: {},
      drag: false,
      resize: false,
      width: 200,
      height: 400,
      animating: false,
      resizable: true,
      position: {
        x: 0,
        y: 0
      },
      oldposition: {},
      overlayShow: false,
      resizeSide: [
        'side-top',
        'side-bottom',
        'side-left',
        'side-right',
        'angle-top-left',
        'angle-top-right',
        'angle-bottom-left',
        'angle-bottom-right'
      ]
    }
  },
  computed: {
    window() {
      return { 'width': this.width, 'height': this.height }
    }
  },
  watch: {
    dragDialog: {
      handler(props) {
        this.dialog = {
          ...this.defaultDialog,
          ...props
        }
        if (this.dialog.show) {
          if (this.dialog.fullScreen) {
            this.$nextTick(() => {
              this.onMax()
            })
          } else {
            this.$nextTick(() => {
              this.onNormal()
            })
          }
        }
      },
      deep: true
    }
  },
  created() {
  },
  methods: {
    onFocus(id) {
      // this.$store.dispatch('manager/focusTask', id)
    },
    onClose(id) {
      this.dialog.show = false
      this.$emit('close')
      // this.$store.dispatch('manager/closeTask', id);
    },
    onMin(id) {
      // this.$store.dispatch('manager/minTask', id);
    },
    onNormal() {
      const w = document.body.clientWidth
      const h = document.body.clientHeight
      this.width = this.dialog.width > 0 ? this.dialog.width : w / 2
      this.height = this.dialog.height > 0 ? this.dialog.height : w / 3
      this.position.x = w / 2 - this.width / 2
      this.position.y = (h - this.height) / 2
    },
    onMax() {
      if (this.dialog.fullScreen && this.oldPosition) {
        this.animating = true
        this.resizable = true
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.dialog.fullScreen = false
          this.position.y = this.oldPosition.y
          this.position.x = this.oldPosition.x
          this.height = this.oldPosition.height
          this.width = this.oldPosition.width
          this.oldPosition = null
          clearTimeout(this.timer)
          this.timer = setTimeout(() => {
            this.animating = false
          }, 500)
        })
      } else {
        this.animating = true
        this.resizable = false
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.dialog.fullScreen = true
          this.oldPosition = {
            y: this.position.y,
            x: this.position.x,
            height: this.height,
            width: this.width
          }
          this.position.y = 0
          this.position.x = 0
          this.height = document.body.clientHeight * 0.95
          this.width = document.body.clientWidth
          clearTimeout(this.timer)
          this.timer = setTimeout(() => {
            this.animating = false
          }, 500)
        })
      }
    },
    onResize(direction) {
      this.resize = true
      this.overlayShow = true
      document.onmousemove = (event) => {
        if (this.resize) {
          let x = event.clientX
          let y = event.clientY
          const mx = document.body.clientWidth
          const my = document.body.clientHeight * 0.95
          x = x >= 0 ? (x >= mx ? mx : x) : 0
          y = y >= 0 ? (y >= my ? my : y) : 0
          if (direction.indexOf('top') >= 0) {
            this.height = this.height + (this.position.y - y)
            this.position.y = y
          }
          if (direction.indexOf('left') >= 0) {
            this.width = this.width + (this.position.x - x)
            this.position.x = x
          }
          if (direction.indexOf('bottom') >= 0) {
            this.height = this.height + (y - (this.position.y + this.height))
          }
          if (direction.indexOf('right') >= 0) {
            this.width = this.width + (x - (this.position.x + this.width))
          }
        }
      }
      document.onmouseup = () => {
        this.resize = false
        this.overlayShow = false
      }
    },
    onMousedown(e) {
      const w = e.clientX - this.position.x
      const h = e.clientY - this.position.y
      if (!this.dialog.fullScreen) {
        this.drag = true
        document.onmousemove = e => {
          if (this.drag) {
            const mx = document.body.clientWidth
            const my = document.body.clientHeight * 0.95
            this.position.x = e.clientX - w
            this.position.y = e.clientY - h
            this.position.x = this.position.x <= 0 ? 0 : ((this.position.x + this.width) >= mx ? (mx - this.width) : this.position.x)
            this.position.y = this.position.y <= 0 ? 0 : ((this.position.y + this.height) >= my ? (my - this.height) : this.position.y)
          }
        }
        document.onmouseup = () => {
          this.drag = false
        }
      }
    }
  }
}
</script>

<style lang="less" rel="stylesheet/less">
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    padding: 1px 1px;
  }
  @blue:#4b8de4;

  .Filter(@val){
    -webkit-filter: @val;
    -moz-filter: @val;
    -o-filter: @val;
    -ms-filter: @val;
  }
  @titleHeight: 30px;/**标题栏高度**/
  @taskHeight: 40px;/**任务栏高度**/
  @taskbackground: #f9f9f9;/**任务栏颜色**/

  .el-dialog__body {
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    height:100%;
    &.animating {
      transition: all ease 0.5s;
    }

    .window-title {
      position: relative;
      background: #f2f6ff;
      text-align: left;
      line-height: @titleHeight;
      height: @titleHeight;
      cursor: default;
      color: #aaa;
      .Filter(saturate(0.5));

      .icon {
        position: absolute;
        top: 4px;
        left: 5px;
        height: 18px;
        width: 18px;
        background-size: cover;
      }
    }

    &.focus {
      box-shadow: 0 10px 35px rgba(0, 0, 0, 0.6);
      .window-title {
        background: #f5f8ff;
        color: #333;
        .Filter(saturate(1.2));
      }
    }

    &.fullScreen {
      .window-control .button.max {
        @margin: 5px;
        @diff: 2px;
        @w: 8px;
        @b: 1px;
        @top: 0px;
        @left: 0px;

        &:before {
          box-sizing: border-box;
          content: '';
          display: block;
          position: absolute;
          height: @w;
          width: @w;
          left: (@titleHeight - 2 * @margin - @w) /2 - @diff + @left;
          top: (@titleHeight - 2 * @margin - @w) /2 + @diff + @top;
          border: @b solid #fff;
          border-top-width: 2 * @b;
        }

        &:after {
          box-sizing: border-box;
          content: '';
          display: block;
          position: absolute;
          height: @w;
          width: @w;
          left: (@titleHeight - 2 * @margin - @w) /2 + @diff + @left;
          top: (@titleHeight - 2 * @margin - @w) /2 - @diff + @top;
          border: @b solid #fff;
          border-top-width: 2 * @b;
        }
      }
    }

    .window-control {
      @margin: 5px;
      position: absolute;
      right: 0;
      top: 0;
      height: @titleHeight;
      .button {
        display: block;
        position: relative;
        width: @titleHeight - 2 * @margin;
        height: @titleHeight - 2 * @margin;
        margin: @margin @margin 0 0;
        float: left;
        border-radius: 3px;
      }

      .min {
        background: #81c2d0;
        &:before {
          box-sizing: border-box;
          @w: 12px;
          @h: 2px;
          content: '';
          display: block;
          position: absolute;
          height: @h;
          width: @w;
          left: (@titleHeight - 2 * @margin - @w) /2;
          bottom: ((@titleHeight - 2 * @margin - @h) /2) - 4px;
          background: #fff;
        }
      }
      .max {
        background: #659a65;
        &:before {
          box-sizing: border-box;
          @w: 12px;
          @b: 1px;
          content: '';
          display: block;
          position: absolute;
          height: @w;
          width: @w;
          left: (@titleHeight - 2 * @margin - @w) /2;
          top: (@titleHeight - 2 * @margin - @w) /2;
          border: @b solid #fff;
          border-top-width: 2 * @b;
        }
      }

      .Rotate(@deg) {
        transform: rotate(@deg);
        -webkit-transform: rotate(@deg);
        -moz-transform: rotate(@deg);
      }

      .close {
        &:before,
        &:after {
          @w: 14px;
          @h: 2px;
          content: '';
          display: block;
          position: absolute;
          height: @h;
          width: @w;
          left: (@titleHeight - 2 * @margin - @w) /2;
          top: (@titleHeight - 2 * @margin - @h) /2;
          background: #fff;
          .Rotate(45deg);
        }
        &:after {
          .Rotate(-45deg);
        }
        background: #d26262;
      }
    }

    @reactionWidth: 4px;
    .resize-side {
      position: absolute;
    }
    .resize-overlay {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
    }
    .side-right {
      right: 0;
      bottom: 0;
      height: 100%;
      width: @reactionWidth;
      cursor: e-resize;
    }
    .side-bottom {
      right: 0;
      bottom: 0;
      width: 100%;
      height: @reactionWidth;
      cursor: s-resize;
    }
    .side-left {
      left: 0;
      top: 0;
      height: 100%;
      width: @reactionWidth;
      cursor: w-resize;
    }
    .side-top {
      left: 0;
      top: 0;
      width: 100%;
      height: @reactionWidth;
      cursor: n-resize;
    }
    .angle-bottom-right {
      right: 0;
      bottom: 0;
      width: @reactionWidth*2;
      height: @reactionWidth*2;
      cursor: se-resize;
    }
    .angle-bottom-left {
      left: 0;
      bottom: 0;
      width: @reactionWidth*2;
      height: @reactionWidth*2;
      cursor: sw-resize;
    }
    .angle-top-right {
      top: 0;
      right: 0;
      width: @reactionWidth*2;
      height: @reactionWidth*2;
      cursor: ne-resize;
    }
    .angle-top-left {
      top: 0;
      left: 0;
      width: @reactionWidth*2;
      height: @reactionWidth*2;
      cursor: nw-resize;
    }
  }
</style>
